<template>
    <div class="home">
        <HomeHeader :items="headerItem" :nick="userStore.nick" :avatar="userStore.avatar"></HomeHeader>
        <RouterView />
        <BottomSelect :data="bottomSelect" class="bottom" />
    </div>
</template>

<script lang="ts" setup>
import BottomSelect, { type BottomSelectItemType } from './components/bottom/BottomSelect.vue';
import { computed, onUnmounted, ref } from 'vue';
import HomeHeader, { type HeaderItemType } from './components/header/Header.vue';
import { useMessageStore } from '@/stores/messageStore';
import { useUserStore } from '@/stores/user';
const messageStore = useMessageStore();
const userStore = useUserStore();

const headerItem = ref<Array<HeaderItemType>>([{
    title: '加好友/群',
    icon: 'icon-group',
    goto: 'addContact',
}, {
    title: '创建群聊',
    icon: 'icon-addition',
    goto: '',
}]);

const bottomSelect = computed<Array<BottomSelectItemType>>(() => [
    { title: '消息', iconfont: 'icon-message', activeIconfont: 'icon-messagewhite', unreadCount: messageStore.unreadCount, goto: 'message' },
    { title: '联系人', iconfont: 'icon-people', activeIconfont: 'icon-people_fill',unreadCount: 0, goto: 'contact' },
    { title: '公共聊天', iconfont: 'icon-group', activeIconfont: 'icon-group_fill',unreadCount: 0, goto: '' },
    { title: '动态', iconfont: 'icon-icon-test23', unreadCount: 0, goto: '' },
]
);

</script>

<style lang="scss" scoped>
.home {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
    background-color: rgb(240, 240, 240);

    .bottom {}
}
</style>
